<template>
  <div class="logon">
    <h1>Welcome!</h1>
    <!-- 输入手机号，调起手机号键盘 -->
    <van-field v-model="tel" type="tel" label-align="center" label="账号" placeholder="手机号"/>
    <van-field v-model="password" type="password" label-align="center" label="密码" placeholder="密码"/>
    <div class="buttons">
      <van-row justify="center">
        <van-col span="6">
          <van-button type="primary" to="/essayList">登录</van-button>
        </van-col>
      </van-row>
    </div>
    <van-row justify="center">
      <van-col span="6">
        <router-link to="/register">注册</router-link>
      </van-col>
      <van-col offset="5" span="6">
        <router-link to="/resetPassword">忘记密码</router-link>
      </van-col>
    </van-row>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Logon",
  data() {
    return {
      tel: "",
      password: "",
    };
  },
  // components: {
  //   Welcome,
  // },
};
</script>

<style scoped>
.logon {
  position: absolute;
  top: 5rem;
  left: 2rem;
  right: 2rem;
}

.buttons {
  padding: 20px 0;
}
</style>
